<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>收款方式-新增</title>
    <link rel="stylesheet" href="../assets/css/mui.min.css">
    <!-- 自定义的公共样式表 -->
    <link rel="stylesheet" href="../assets/css/lib.common.css">
    <!-- 页面样式 -->
    <link rel="stylesheet" href="../assets/css/app.css">
    <link rel="stylesheet" href="../assets/css/animate3.1.5.css">
    <script src="../assets/js/mui.min.js"></script>
    <!-- 点击复制文本 -->
    <script src="../assets/js/clipboard.min.js"></script>
    <!-- 自定义的js脚本 -->
    <script src="../assets/js/lib.common.js"></script>

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    [endif]-->
</head>
<body>

<!-- 头部状态栏start -->
<header class="mui-bar mui-bar-nav">
    <a url="./收款方式.html" class="mui-icon mui-icon-back dark"></a>
    <h1 class="mui-title black bold">
        收款方式-新增
    </h1>
</header>
<!-- 头部状态栏end -->


<form id="form" action="" class="mui-input-group p_t44 font14">
    <div class="mui-row bg-white font14">
        <div class="mui-col-xs-12 mui-col-sm-12 p_y10">
            <h4 class="p_x5">账户类型</h4>
            <ul class="mui-table-view mui-table-view-radio">
                <!-- 这里 li.mui-selected是打钩的样式 input[checked]是实际选中 如果有默认选中值必须如下统一 -->
                <li class="mui-table-view-cell mui-selected">
                    <label class="mui-navigate-right lib-navigate-input">
                        支付宝
                        <input name="type" onclick="change(this)" value="alipay" type="radio" checked>
                    </label>

                </li>
                <li class="mui-table-view-cell">
                    <label class="mui-navigate-right lib-navigate-input">
                        微信
                        <input name="type" onclick="change(this)" value="weixin" type="radio">
                    </label>
                </li>
            </ul>
        </div>
    </div>
    <div class="p_y25 black font14">
        <div class="mui-input-row" id="name">
            <label>姓名：</label>
            <input type="text" name="username" class="mui-input-clear" placeholder="收款人姓名">
        </div>
        <div class="mui-input-row">
            <label>账号：</label>
            <input type="text" name="account" class="mui-input-clear" placeholder="收款账号">
        </div>
        <div class="mui-input-row">
            <label>备注：</label>
            <input type="text" name="desc" class="mui-input-clear" placeholder="备注信息（可选）">
        </div>

    </div>
    <div class="mui-row bg-white p_y25 font14 p_x15">
        <h6 class="mui-col-xs-4 mui-col-sm-4 black">
            收款二维码：
        </h6>
        <div class="mui-col-xs-8 mui-col-sm-8">
            <span class="file-upload mui-icon mui-icon-plusempty"
                  style="width: 150px;height: 150px;font-size: 150px;line-height: 150px;">
                <!-- 如果有默认图片可以如下直接设置 -->
                <input type="file" name="qrCode" title="">
            </span>
        </div>
    </div>
    <div class="mui-row bg-white p_y25 font14 p_x15">
        <button type="button" class="mui-btn mui-btn-primary w100 radius20 line30" onclick="__submit('#form')">提交保存
        </button>
    </div>
</form>
</body>

</html>
<script>

    function change(e){
        switch(e.value){
            case 'alipay':
                document.getElementById('name').style.display = 'none';
                break;
            default:
            document.getElementById('name').style.display = 'block';
        }
    }
</script>